<template>
  <div @click="$emit('handNavTo')" class="title_content_item">
    <!-- <img class="img" :src="item.imageUrl" alt="" /> -->
    <span
      class="el-icon-close close_icon"
      style="color: #909399"
      v-if="isCloseIcon"
      @click.stop="$emit('handleClose')"
    ></span>
    <el-image class="img" :src="item[imgKey] | filtersFileUrl()" />
    <div class="content">
      <div class="title">{{ item.name }}</div>
      <div class="summary">
        {{ item[descriptionKey] }}
      </div>
      <div class="summary" v-if="timeKey && item[timeKey]">
        {{ item[timeKey] }}
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  props: {
    isCloseIcon: {
      type: Boolean,
      default: false,
    },
    imgKey: {
      type: String,
      default: "imageUrl",
    },
    timeKey: {
      type: String,
      default: "",
    },
    descriptionKey: {
      type: String,
      default: "description",
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {},
  methods: {
    handNavTo(row) {
      const { token } = row;
      this.$router.push({
        name: "networkTypDetails",
        query: {
          assetTypeToken: token,
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
@import "~@/styles/mixin.scss";
.title_content_item {
  display: flex;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  padding: 26px;
  position: relative;
  .close_icon {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  &:hover {
    /* 列表选中样式 */
    cursor: pointer;
    background-color: #f3f9ff;
    border: 1px solid rgba(38, 128, 210, 1);
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      color: #333;
      font-size: 16px;
      @include textoverflow(1);
    }
    .summary {
      color: #999999;
      font-size: 12px;
      @include textoverflow(2);
    }
  }

  .img {
    width: 62px;
    height: 62px;
    min-width: 62px;
    margin-right: 14px;
  }
}
</style>
